$(function() {
	c = $("#myCanvas").get(0);
	ctx = c.getContext("2d");
	
	
//	ctx.fillStyle    = '#0000ff';
//	ctx.font = 'bold 16px verdana';
//	ctx.fillText('5842', 0, 16);
//	
//	var w = 100, h = 32;
//	var imagedata = ctx.getImageData(0,0,w,h);
//	var colorStr="<div>";
//	var array=new Array;
//	for (i=0; i<h; i++)  { 
//		array[i]=[];
//		for (j=0; j<w; j++)  {  
//			var index=4*(w*i+j);
//            var red=imagedata.data[index];  
//            var green=imagedata.data[index+1];  
//            var blue=imagedata.data[index+2];  
//            var alpha=imagedata.data[index+3];  
//            if(red==255&&green==255&&blue==255){
//            	array[i].push(0);
//            	colorStr+="<span class='dis_ib'>0</span>";
//            }else{
//            	array[i].push(1);
//            	colorStr+="<span class='red_bg dis_ib'>1</span>";
//            }
//		}  
//		colorStr+="<br />";
//    } 
//	colorStr+="</div>";
//	$("#data").html(colorStr);
	

//	image = new Image();
//	image.src = "/images/data2.jpg";
//	image.onload = function() {
//		ctx.drawImage(image, 0, 0);
//		var w = image.width, h = image.height;
//		console.log("width:"+w+"height:"+h);
//		var imagedata = ctx.getImageData(0,0,w,h);
//		var colorStr="<div>";
//		var array=new Array;
//		for (i=0; i<h; i++)  { 
//			array[i]=[];
//			for (j=0; j<w; j++)  {  
//				var index=4*(w*i+j);
//                var red=imagedata.data[index];  
//                var green=imagedata.data[index+1];  
//                var blue=imagedata.data[index+2];  
//                var alpha=imagedata.data[index+3];  
//                if(red==255&&green==255&&blue==255){
//                	array[i].push(0);
//                	colorStr+="<span class='dis_ib'>0</span>";
//                }else{
//                	array[i].push(1);
//                	colorStr+="<span class='red_bg dis_ib'>1</span>";
//                }
//			}  
//			colorStr+="<br />";
//        } 
//		colorStr+="</div>";
//		$("#data").html(colorStr);
//	};
	
	image = new Image();
	image.src = "/images/test.jpg";
	image.onload = function() {
		ctx.drawImage(image, 0, 0);
	};
});
function doGray(){
	var w = 484, h = 350;
	var imagedata = ctx.getImageData(0,0,w,h);
	for (i=0; i<h; i++)  { 
		for (j=0; j<w; j++)  {  
			var index=4*(w*i+j);
            var red=imagedata.data[index];  
            var green=imagedata.data[index+1];  
            var blue=imagedata.data[index+2];  
            var alpha=imagedata.data[index+3]; 
            var gray = .299 * red + .587 * green + .114 * blue;
            imagedata.data[index]=gray;
            imagedata.data[index+1]=gray;
            imagedata.data[index+2]=gray;
		}  
    } 
	ctx.putImageData(imagedata, 0, 0);  
}
var colors_2=[
            "#ffffff","#eeeeee","#dddddd","#cccccc","#bbbbbb","#aaaaaa",
            "#999999","#888888","#777777","#666666","#555555","#444444",
            "#333333","#222222","#111111","#000000"];

var colors=[
            "#000000","#111111","#222222","#333333","#444444","#555555",
            "#666666","#777777","#888888","#999999","#aaaaaa","#bbbbbb",
            "#cccccc","#dddddd","#eeeeee","#ffffff"];
var type=1;
function getData(){
	var w = 484, h = 350;
//	var w = 25, h = 25;
	var imagedata = ctx.getImageData(0,0,w,h);
	
	c = $("#drowCanvas").get(0);
	ctx = c.getContext("2d");
	
//	var array=new Array;
//	var colorStr="<div>";
	
	var color=(type==1)?colors:colors_2;
	type=(type==1)?0:1;
	
	for (i=0; i<h; i++)  {
//		array[i]=[];
		for (j=0; j<w; j++)  {  
			var index=4*(w*i+j);
            var R=imagedata.data[index];  
            var G=imagedata.data[index+1];  
            var B=imagedata.data[index+2];  
            var Gray =(R*76+G*151+B*28)>>8;
            Gray+=1;
            var zindex=Gray/16>>0;
//            array[i].push(zindex);
//            if(zindex<=10){
//            	colorStr+="<span class='dis_ib red_bg'>"+1+"</span>";
//            }else{
//            	colorStr+="<span class='dis_ib'>"+0+"</span>";
//            }
            if(type==1){
            	ctx.fillStyle = color[zindex];
            }else{
            	ctx.fillStyle = color[zindex];
            }
            ctx.fillRect(j,i,1,1);
		}  
//		colorStr+="<br />";
    } 
//	colorStr+="</div>";
//	$("#data").html(colorStr);
}
//图片反向处理
function ab(){
	var w = 484, h = 350;
	var imagedata = ctx.getImageData(0,0,w,h);
	for (i=0; i<h; i++)  {
		for (j=0; j<w; j++)  {  
			var index=4*(w*i+j);
            var R=imagedata.data[index];  
            var G=imagedata.data[index+1];  
            var B=imagedata.data[index+2];  
            
            imagedata.data[index]=255-R;  
            imagedata.data[index+1]=255-G;  
            imagedata.data[index+2]=255-B;  
            
		}  
    } 
	ctx.putImageData(imagedata, 0, 0);
}
